<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Webpixels">
    <title>Quick – Website UI Kit (FREE)</title>
    <!-- Preloader -->
    <style>
        @keyframes hidePreloader {
            0% {
                width: 100%;
                height: 100%;
            }

            100% {
                width: 0;
                height: 0;
            }
        }

        body>div.preloader {
            position: fixed;
            background: white;
            width: 100%;
            height: 100%;
            z-index: 1071;
            opacity: 0;
            transition: opacity .5s ease;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body:not(.loaded)>div.preloader {
            opacity: 1;
        }

        body:not(.loaded) {
            overflow: hidden;
        }

        body.loaded>div.preloader {
            animation: hidePreloader .5s linear .5s forwards;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            setTimeout(function() {
                document.querySelector('body').classList.add('loaded');
            }, 300);
        });
    </script>
    <!-- Favicon -->
    <link rel="icon" href="../../assets/img/brand/favicon.png" type="image/png"><!-- Font Awesome -->
    <link rel="stylesheet" href="../../assets/libs/@fortawesome/fontawesome-free/css/all.min.css">
    <!-- Quick CSS -->
    <link rel="stylesheet" href="../../assets/css/quick-website.css">
    <!-- Docs CSS - used only for demo -->
    <link rel="stylesheet" href="../../docs/assets/css/docs.css">
</head>

<body class="docs">
    <!-- Nav -->
    <header class="header" id="header-main">
        <!-- Main navbar -->
        <nav class="navbar navbar-main navbar-expand-lg fixed-top navbar-shadow navbar-light bg-white border-bottom" id="navbar-main">
            <div class="container-fluid justify-content-between">
                <!-- User's navbar -->
                <div class="navbar-user d-lg-none">
                    <ul class="navbar-nav flex-row align-items-center">
                        <li class="nav-item">
                            <a href="#" class="nav-link nav-link-icon sidenav-toggler" data-action="sidenav-pin" data-target="#sidenav-main"><i data-feather="menu"></i></a>
                        </li>
                    </ul>
                </div>
                <!-- Navbar brand -->
                <a class="navbar-brand" href="../../docs/index.html">
                    <img alt="Image placeholder" src="../../assets/img/brand/dark.svg" id="navbar-logo">
                    <sup class="text-muted text-xs text-uppercase">Docs</sup>
                </a>
                <!-- Live preview -->
                <ul class="navbar-nav flex-row align-items-center d-lg-none">
                    <li class="nav-item">
                        <a href="../../index.html" class="nav-link nav-link-icon"><i data-feather="eye"></i></a>
                    </li>
                </ul>
                <!-- Navbar nav -->
                <div class="collapse navbar-collapse" id="navbar-main-collapse">
                    <!-- Right menu -->
                    <ul class="navbar-nav align-items-center mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="../../docs/getting-started/quick-start.html">Getting started</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../../docs/components/alerts.html">Components</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://github.com/webpixels/quick-website-ui-kit-demo/issues" target="_blank">Support</a>
                        </li>
                    </ul>
                </div>
                <a href="../../index.html" class="btn btn-sm btn-primary ml-4 btn-icon d-none d-lg-inline-flex">
                    <span class="btn-inner--icon"><i data-feather="chevron-left"></i></span>
                    <span class="btn-inner--text">Back to Quick</span>
                </a>
            </div>
        </nav>
    </header>
    <div class="container-fluid container-docs">
        <!-- Sidenav -->
        <nav class="sidenav navbar navbar-vertical navbar-expand-xs navbar-light bg-white" id="sidenav-main">
            <div class="scrollbar-inner px-4">
                <!-- Navigation -->
                <div class="docs-sidebar pt-6 pt-lg-7">
                    <h6 class="mt-4">Getting started</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/getting-started/quick-start.html" class="nav-link">Quick start</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/getting-started/build-tools.html" class="nav-link">Build tools</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Styleguide</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/styleguide/colors.html" class="nav-link">Colors</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/styleguide/typography.html" class="nav-link">Typography</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/styleguide/icons.html" class="nav-link">Icons</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Components</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/components/alerts.html" class="nav-link">Alerts</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/avatar.html" class="nav-link">Avatar</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/badge.html" class="nav-link">Badge</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/breadcrumb.html" class="nav-link">Breadcrumb</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/buttons.html" class="nav-link">Buttons</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/card.html" class="nav-link">Card</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/collapse.html" class="nav-link">Collapse</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/dropdowns.html" class="nav-link">Dropdowns</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/forms.html" class="nav-link">Forms</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/input-group.html" class="nav-link">Input group</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/modal.html" class="nav-link">Modal</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/navs.html" class="nav-link">Navs</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/navbar.html" class="nav-link">Navbar</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/pagination.html" class="nav-link">Pagination</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/popovers.html" class="nav-link">Popovers</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/progress.html" class="nav-link">Progress</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/spinners.html" class="nav-link">Spinners</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/tables.html" class="nav-link">Tables</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/toasts.html" class="nav-link">Toasts</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/tooltips.html" class="nav-link">Tooltips</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Plugins</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/plugins/animate.html" class="nav-link">Animate</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/plugins/google-maps.html" class="nav-link">Google maps</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Main content -->
        <div class="main-content row position-relative pb-5">
            <div class="col-xl-9 docs-content pb-5">
                <!-- Docs title -->
                <div class="docs-title">
                    <h1>Cutomization</h1>
                    <p class="lead mb-0">Learn how to create your own style without changing the theme’s core files so you can take advantage of future updates.</p>
                </div>
                <!-- Docs content -->
                <h2 id="sass">SASS</h2>
                <p>Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. To learn more <a href="https://sass-lang.com/documentation/file.SASS_REFERENCE.html" target="blank">click here</a> to see the official documentation.</p>
                <h3 id="file-structure">File structure</h3>
                <p>The Sass structure is built from two main folders:</p>
                <ul>
                    <li><strong>core</strong>, which contains all the theme’s components</li>
                    <li><strong>skins</strong>, which contains folders with different custom variables that allow you to change the theme’s appearance with ease.</li>
                    <li><strong>custom</strong>, which contains a basic structure made from a style, a font and a variable files in order to get you started with the customization process nice and easy</li>
                </ul>
                <div class="alert alert-info">
                    <p><strong>Heads up!</strong> Bootstrap is automatically loaded from the node_modules folder in the <strong>quick-website.scss</strong> file. It is installed via <strong>npm install</strong> and compiled using the build tools.</p>
                </div>
                <p>Remember, you are not limited to use the structure we have included in the <code class="highlighter-rouge">resources/scss/custom</code> folder. If you have a more complex project you can choose to follow the directory structure we have made for Quick. This will help you create modular components easily extendable and re-usable.</p>
                <p>Below is the main structure you will be able to see inside the main SCSS folder:</p>
                <div class="docs-example">
                    <figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">quick-website-ui-kit-demo/
├── resources/
└── ├── scss/
    │   ├── core/
    │   ├── ├── components/
    │   ├── ├── mixins/
    │   ├── ├── utilities/
    │   ├── ├── libs/
    │   │   ├── _components.scss
    │   │   ├── _functions.scss
    │   │   ├── _mixins.scss
    │   │   ├── _reboot.scss
    │   │   ├── _utilities.scss
    │   │   ├── _libs.scss
    │   │   ├── _variables.scss
    │   │   └── _variables-dark.scss
    ├── ├── skins/
    │   │   ├── .../
    └── └── custom/
    │   │   ├── _fonts.scss
    │   │   ├── _styles.scss
    │   │   └── _variables.scss
    │   │   quick-website.scss
    └── └── quick-website-dark.scss</code></pre>
                    </figure>
                </div>
                <div class="alert alert-warning">
                    <p><strong>Important!</strong> We highly recommend to not make changes to the core folder. It includes core files and components that can be updated in the future. If you want to take advantage of future updates you may want to have a more Bootstrap-ish approach, meaning you should create new styles or components to override styles, extend or add new components in the <code class="highlighter-rouge">custom</code> folder.</p>
                </div>
                <h3 id="variable-defaults">Variable defaults</h3>
                <p>Every Sass variable in Bootstrap 4 and Quick includes the <code class="highlighter-rouge">!default</code> flag allowing you to override the variable’s default value in your own Sass without modifying Quick’s source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.</p>
                <p>You will find the complete list of Quick’s variables in <code class="highlighter-rouge">resources/scss/core/_variables.scss</code>.</p>
                <h3 id="changing-variables">Changing variables</h3>
                <p>In order to make Sass features modular and re-usable each component has its own styles and its own set of variables. Variables should follow the <code class="highlighter-rouge">$component-state-property-size</code> formula for consistent naming.</p>
                <p>Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.</p>
                <p>Let’s say you need to change the primary color with the one you use for you brand. All you have to do is to:</p>
                <ul>
                    <li>open the <code class="highlighter-rouge">core/_variables.scss</code>, look for the <code class="highlighter-rouge">$primary</code> variable and copy it</li>
                    <li>open the <code class="highlighter-rouge">custom/_variables.scss</code> and paste the variable with its value</li>
                    <li>replace the value and remove the <code class="highlighter-rouge">!default</code> flag</li>
                    <li>make sure you are running Gulp or Laravel Mix watch tasks described in the <a href="build-tools.html" target="\_blank">build tools</a> page</li>
                </ul>
                <div class="alert alert-info">
                    <p>Try following the same variable succession order. Especially, colors, typography and other fundamental variables need to be declared at the beginning of the file so they can be accessible to the components that may follow afterwards.</p>
                </div>
                <h3 id="creating-components">Creating components</h3>
                <p>Creating components is easy. It is even easier if you follow the guidelines we are suggesting. This we’ll keep make your code look clean and be easy to read and to work with. Also you will make sure you have results at the same level of quality as Quick or Bootstrap.</p>
                <p>There are a few steps:</p>
                <p>First, determine which component are you going to develop next. Even though it already exists, let’s say you want to create an <code class="highlighter-rouge">alert</code> component.
                    Determining exactly the component and its purpose you help you to find a name very easily.</p>
                <p>So, in this case the class name for <code class="highlighter-rouge">alert</code> will be <code class="highlighter-rouge">.alert</code>. Other variations or modifier classes will begin with <code class="highlighter-rouge">.alert-*</code> (e.g: .alert-danger, which will change the background and text color accordingly).</p>
                <p>Also, all variables associated to the class <code class="highlighter-rouge">.alert</code> will begin with <code class="highlighter-rouge">$alert</code>, <code class="highlighter-rouge">$alert-*</code>. Basically, you will need to follow the naming convention Bootstrap and Quick use: <code class="highlighter-rouge">$name-state-property-modifier</code>, where:</p>
                <ul>
                    <li><code class="highlighter-rouge">name</code> is the component name corresponding to the given class name (e.g .alert)</li>
                    <li><code class="highlighter-rouge">state</code> is the pseudo-class used to define a special state of an element (e.g: hover, active, checked etc)</li>
                    <li><code class="highlighter-rouge">property</code> is the given CSS property in order to achieve the results you need (e.g: color, background, display)</li>
                    <li><code class="highlighter-rouge">modifier</code> is used to define additional information for the current property, like sizes, axis (e.g alert-sm, alert-padding-y)</li>
                </ul>
                <p>To wrap it up, you should have in the end something like this:</p>
                <p><strong>In custom/_variables.scss</strong></p>
                <div class="docs-example">
                    <figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">$alert-padding-y:   1rem;
$alert-padding-x:   1.5rem;
$alert-color:       #FFF;
$alert-bg:          #000;
$alert-hover-bg:    lighten($alert-bg, 10%);</code></pre>
                    </figure>
                </div>
                <p><strong>In custom/_styles.scss</strong></p>
                <div class="docs-example">
                    <figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">.alert {
    padding: $alert-padding-y $alert-padding-x;
    color: $alert-color;
    background-color: $alert-bg;

    &amp;:hover {
        background-color: $alert-hover-bg;
    }
}</code></pre>
                    </figure>
                </div>
                <div class="alert alert-info">
                    <p><strong>Remember!</strong> You can modify the structure inside the user’s folder. You can make separate files for each newly created component and import them one by one in the <code class="highlighter-rouge">_styles.scss</code> file. They will be automatically loaded and compiled in the main Sass file.</p>
                </div>
                <h2 id="js">JS</h2>
                <h3 id="file-structure-1">File structure</h3>
                <p>You will find in Quick a special structure for the JS files. We did this to sort each script by its scope. In the <code class="highlighter-rouge">resources/js</code> folder you will find the following file structure:</p>
                <div class="docs-example">
                    <figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">quick-website-ui-kit-demo/
├── resources/
└── ├── js/
    │   ├── core/
    │   │   ├── charts/
    │   │   ├── custom/
    │   │   ├── init/
    │   │   ├── maps/
    │   │   ├── libs/</code></pre>
                    </figure>
                </div>
                <ul>
                    <li><strong>custom</strong> contains all the custom scripts made by us for Quick</li>
                    <li><strong>init</strong> contains all the scripts needed to initialize the Quick’s components or third-party plugins</li>
                    <li><strong>maps</strong> contains map scripts needed to customize the default Google Map style or other map library</li>
                    <li><strong>libs</strong> contains all the scripts needed to initialize third-party plugins</li>
                    <li><strong>layout.js</strong> is a file where we put the code needed to develop global layout actions</li>
                </ul>
                <h3 id="making-changes">Making changes</h3>
                <p>Most of the JS files are just a starting point in order to make the components function properly. This means that you will need to change them accordingly, add options, create more functions and so on. All the plugins are well documented and each one has the link that will point you to the official documentations.</p>
                <p>Also, when starting a new project you can install only the plugins you need.</p>
                <div class="alert alert-info">
                    <p><strong>Note!</strong> When starting modifying JS files make sure you keep an eye on those you edited, because Quick will be constantly updated.</p>
                </div>
                <h3 id="compiling">Compiling</h3>
                <p>All JS resources will be bundled in a single file. For the <code class="highlighter-rouge">watch</code> commands, each time you make a change, the file will be automatically regenerated and injected in the browser. Learn more about the <a href="build-tools.html">build tools</a>.</p>
            </div>
            <div class="col-xl-3 docs-sidebar d-none d-xl-block">
                <div class="toc-sidebar pl-4 mt-lg-8 border-left">
                    <div class="scrollbar-inner">
                        <h6 class="mb-3">Summary</h6>
                        <ul class="section-nav">
                            <li class="toc-entry toc-h2"><a href="#sass">SASS</a>
                                <ul>
                                    <li class="toc-entry toc-h3"><a href="#file-structure">File structure</a></li>
                                    <li class="toc-entry toc-h3"><a href="#variable-defaults">Variable defaults</a></li>
                                    <li class="toc-entry toc-h3"><a href="#changing-variables">Changing variables</a></li>
                                    <li class="toc-entry toc-h3"><a href="#creating-components">Creating components</a></li>
                                </ul>
                            </li>
                            <li class="toc-entry toc-h2"><a href="#js">JS</a>
                                <ul>
                                    <li class="toc-entry toc-h3"><a href="#file-structure-1">File structure</a></li>
                                    <li class="toc-entry toc-h3"><a href="#making-changes">Making changes</a></li>
                                    <li class="toc-entry toc-h3"><a href="#compiling">Compiling</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <!-- Scripts -->
    <!-- Core JS  -->
    <script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="../../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../assets/libs/svg-injector/dist/svg-injector.min.js"></script>
    <script src="../../assets/libs/feather-icons/dist/feather.min.js"></script>
    <!-- Docs JS -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
    <script src="../../assets/libs/clipboard/dist/clipboard.min.js"></script>
    <!-- Quick JS -->
    <script src="../../assets/js/quick-website.js"></script>
    <!-- Feather Icons -->
    <script>
        feather.replace({
            'width': '1em',
            'height': '1em'
        })
    </script>
</body>

</html>